<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <!-- to support old browsers, we use webcomponents-lite.js to polyfill -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.10/webcomponents-lite.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/example-html5-datagrid/html5grid.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
    <script src="../dist/angular-grid.js?ignore=notused8"></script>
    <link rel="stylesheet" type="text/css" href="../dist/angular-grid.css?ignore=notused8">
    <link rel="stylesheet" type="text/css" href="../dist/theme-fresh.css?ignore=notused8">

    <script src="/example-web-component-grid/webComponentDataGrid.js"></script>

</head>

<body>

    <div style="width: 800px;">
        <div style="padding: 4px">
            <div style="float: right;">
                <input type="text" id="quickFilterInput" placeholder="Type text to filter..."/>
            </div>
            <div style="padding: 4px;">
                <b>Employees Skills and Contact Details</b> <span id="rowCount"/>
            </div>
            <div style="clear: both;"/>
        </div>
        <!-- Putting the width and height on a wrapped element, as couldn't get web component to accept css -->
        <div style="height: 400px; width: 800px;">
            <agile-grid id="myAgileGrid" class="ag-fresh ag-basic"></agile-grid>
        </div>
    </div>

</body>
</html>
